<script setup>
import { ref, onMounted, watch, computed } from "vue";

// 内置提供商列表
const builtInProviders = [
  { id: "volcengine", name: "火山引擎" },
  { id: "alibaba", name: "阿里巴巴百炼" },
  { id: "tencent", name: "腾讯混元" },
  { id: "xfyun", name: "科大讯飞" },
  { id: "deepseek", name: "深度求索" },
  { id: "openai", name: "OpenAI" },
  { id: "google", name: "Google" },
  { id: "baidu", name: "文心一言" },
];

// 用户自定义提供商列表
const customProviders = ref([]);

// 合并内置提供商和自定义提供商
const providers = computed(() => {
  return [...builtInProviders, ...customProviders.value];
});

const selectedProvider = ref("");
const apiKey = ref("");
const apiUrl = ref("");
const apiVersion = ref("");
const notification = ref({ show: false, type: "", message: "" });
const showApiKey = ref(false);

// 用于添加自定义提供商的表单
const newProviderForm = ref({
  show: false,
  id: "",
  name: "",
  apiUrl: "",
  apiVersion: "",
  previousProvider: ""
});

// 存储所有提供商的API密钥
const providerApiKeys = ref({});

// 替换之前的cryptoUtils对象
const cryptoUtils = {
  // 简单的XOR混淆函数
  _xorEncodeDecode(str, key) {
    // 确保key是字符串
    key = String(key || browser.runtime.id || 'default-key');
    
    // 生成一个固定的密钥序列
    let keyChars = [];
    for (let i = 0; i < 256; i++) {
      keyChars[i] = key.charCodeAt(i % key.length);
    }
    
    // XOR操作
    let result = "";
    for (let i = 0; i < str.length; i++) {
      const charCode = str.charCodeAt(i) ^ keyChars[i % 256];
      result += String.fromCharCode(charCode);
    }
    
    return result;
  },
  
  // 混淆并Base64编码
  async encryptApiKey(apiKey) {
    if (!apiKey) return '';
    
    try {
      // 首先进行XOR混淆
      const xorStr = this._xorEncodeDecode(apiKey, browser.runtime.id);
      
      // 然后进行Base64编码
      return btoa(xorStr);
    } catch (error) {
      console.error('API密钥混淆失败:', error);
      // 如果失败，返回原始密钥的Base64编码
      return btoa(apiKey);
    }
  },
  
  // Base64解码并解混淆
  async decryptApiKey(encodedApiKey) {
    if (!encodedApiKey) return '';
    
    try {
      // 首先进行Base64解码
      const decoded = atob(encodedApiKey);
      
      // 然后进行XOR解混淆
      return this._xorEncodeDecode(decoded, browser.runtime.id);
    } catch (error) {
      console.error('API密钥解混淆失败:', error);
      // 尝试直接Base64解码
      try {
        return atob(encodedApiKey);
      } catch (e) {
        console.error('Base64解码也失败:', e);
        return encodedApiKey; // 所有方法都失败时返回原始值
      }
    }
  }
};

onMounted(async () => {
  try {
    // 加载所有存储数据进行检查
    const allData = await browser.storage.sync.get(null);
    console.log("onMounted: 全部存储数据:", allData);
    
    // 从存储中加载设置
    const options = await browser.storage.sync.get([
      "provider",
      "providerApiKeys",
      "apiUrl",
      "apiVersion",
      "customProviders", // 添加加载自定义提供商
    ]);
    
    console.log("onMounted: 加载选项:", options);

    // 检查并初始化数据
    if (options.customProviders) {
      customProviders.value = options.customProviders;
      console.log("已加载自定义提供商:", customProviders.value);
    }
    
    if (options.providerApiKeys) {
      // 解密所有加密的API密钥
      const decryptedKeys = {};
      for (const [provider, encryptedKey] of Object.entries(options.providerApiKeys)) {
        decryptedKeys[provider] = await cryptoUtils.decryptApiKey(encryptedKey);
      }
      providerApiKeys.value = decryptedKeys;
      console.log("已加载API密钥:", Object.keys(providerApiKeys.value));
    } else {
      // 如果API密钥不存在，初始化为空对象
      providerApiKeys.value = {};
      console.log("初始化空API密钥对象");
    }
    
    if (options.provider) {
      selectedProvider.value = options.provider;
      console.log("已选中提供商:", selectedProvider.value);
    }
    
    if (options.apiUrl) apiUrl.value = options.apiUrl;
    if (options.apiVersion) apiVersion.value = options.apiVersion;

    // 设置当前选中提供商的API密钥
    if (selectedProvider.value && providerApiKeys.value && 
        typeof providerApiKeys.value[selectedProvider.value] !== 'undefined') {
      apiKey.value = providerApiKeys.value[selectedProvider.value];
      console.log("已设置选中提供商API密钥:", 
                 apiKey.value ? "非空值" : "空值", 
                 "类型:", typeof apiKey.value);
    } else if (selectedProvider.value) {
      console.log("找不到选中提供商的API密钥");
      apiKey.value = ""; // 未找到则设为空字符串
    }
  } catch (error) {
    console.error("加载设置出错:", error);
  }
});

// 根据选择的提供商自动设置默认的 API URL 和版本，以及对应的API密钥
watch(selectedProvider, (newProvider) => {
  // 不管是哪种情况，都先记录调试信息
  console.log("选择提供商变更:", newProvider);
  
  // 设置对应提供商的API密钥
  if (newProvider) {
    apiKey.value = providerApiKeys.value[newProvider] || "";
  } else {
    apiKey.value = ""; // 如果没有选择提供商，则清空
  }

  // 每次切换提供商时，确保密钥是隐藏状态
  showApiKey.value = false;

  // 先查找当前选择的提供商是否是自定义提供商
  const customProvider = customProviders.value.find(p => p.id === newProvider);
  if (customProvider) {
    console.log("找到自定义提供商:", customProvider);
    // 设置该自定义提供商的API URL和版本
    apiUrl.value = customProvider.apiUrl || "";
    apiVersion.value = customProvider.apiVersion || "";
    return;
  }

  // 如果不是自定义提供商，则根据内置提供商设置
  switch (newProvider) {
    case "volcengine":
      apiUrl.value = "https://ark.cn-beijing.volces.com/api/v3";
      apiVersion.value = "doubao-vision-lite-32k-241015";
      break;
    case "alibaba":
      apiUrl.value = "https://dashscope.aliyuncs.com/compatible-mode/v1";
      apiVersion.value = "qwen-max";
      break;
    case "tencent":
      apiUrl.value = "https://api.hunyuan.cloud.tencent.com/v1";
      apiVersion.value = "hunyuan-turbo";
      break;
    case "xfyun":
      apiUrl.value = "https://spark-api-open.xf-yun.com/v1";
      apiVersion.value = "generalv3.5";
      break;
    case "deepseek":
      apiUrl.value = "https://api.deepseek.com/v1";
      apiVersion.value = "deepseek-reasoner";
      break;
    case "openai":
      apiUrl.value = "https://api.openai.com/v1";
      apiVersion.value = "gpt-4o-mini";
      break;
    case "google":
      apiUrl.value = "https://generativelanguage.googleapis.com/v1beta/openai/";
      apiVersion.value = "gemini-2.0-flash";
      break;
    case "baidu":
      apiUrl.value =
        "https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions";
      apiVersion.value = "wenxin-chat";
      break;
    default:
      apiUrl.value = "";
      apiVersion.value = "";
      console.log("未知提供商或未选择提供商:", newProvider);
  }
});

// 监视apiKey变化，更新providerApiKeys
watch(apiKey, (newApiKey) => {
  if (selectedProvider.value) {
    // 即使API Key为空也要保存
    providerApiKeys.value = {
      ...providerApiKeys.value,
      [selectedProvider.value]: newApiKey || "", // 使用空字符串代替undefined或null
    };
  }
});

// 切换密钥显示/隐藏状态
const toggleApiKeyVisibility = () => {
  showApiKey.value = !showApiKey.value;
};

// 显示添加自定义提供商表单
const showAddProviderForm = () => {
  // 保存当前选中的提供商，用于之后恢复
  const previousProvider = selectedProvider.value;
  
  // 清除当前选中的提供商，这会隐藏API配置区域
  selectedProvider.value = "";
  
  // 显示添加提供商表单
  newProviderForm.value = {
    show: true,
    id: "",
    name: "",
    previousProvider: previousProvider // 保存之前的选择
  };
};

// 关闭添加自定义提供商表单
const closeAddProviderForm = () => {
  // 恢复之前选中的提供商
  if (newProviderForm.value.previousProvider) {
    selectedProvider.value = newProviderForm.value.previousProvider;
  }
  
  // 隐藏表单
  newProviderForm.value.show = false;
};

// 添加自定义提供商
const addCustomProvider = () => {
  // 验证表单
  if (!newProviderForm.value.id || !newProviderForm.value.name) {
    notification.value = {
      show: true,
      type: "error",
      message: "标识符和名称是必填项",
    };
    return;
  }
  
  // 检查ID是否已存在
  const existingProvider = providers.value.find(p => p.id === newProviderForm.value.id);
  if (existingProvider) {
    notification.value = {
      show: true,
      type: "error",
      message: "提供商标识符已存在",
    };
    return;
  }
  
  // 添加新提供商，注意我们不再存储apiUrl和apiVersion作为默认值
  const newProvider = {
    id: newProviderForm.value.id,
    name: newProviderForm.value.name,
    isCustom: true
  };
  
  customProviders.value.push(newProvider);
  
  // 默认添加API密钥空值
  providerApiKeys.value[newProvider.id] = "";
  
  // 保存到存储
  saveCustomProviders();
  
  // 显示成功通知
  notification.value = {
    show: true,
    type: "success",
    message: `成功添加提供商: ${newProvider.name}`,
  };
  
  // 自动选择刚创建的提供商
  selectedProvider.value = newProvider.id;
  
  // 关闭添加表单
  newProviderForm.value.show = false;
  
  setTimeout(() => {
    notification.value.show = false;
  }, 3000);
};

// 删除自定义提供商
const deleteCustomProvider = (providerId) => {
  // 过滤掉要删除的提供商
  customProviders.value = customProviders.value.filter(p => p.id !== providerId);
  
  // 如果当前选中的是要删除的提供商，则重置选中项
  if (selectedProvider.value === providerId) {
    selectedProvider.value = "";
    apiKey.value = "";
    apiUrl.value = "";
    apiVersion.value = "";
  }
  
  // 从API密钥中删除
  if (providerApiKeys.value[providerId]) {
    delete providerApiKeys.value[providerId];
  }
  
  // 保存到存储
  saveCustomProviders();
  
  notification.value = {
    show: true,
    type: "success",
    message: "已删除提供商",
  };
  
  setTimeout(() => {
    notification.value.show = false;
  }, 3000);
};

// 保存自定义提供商列表
const saveCustomProviders = async () => {
  try {
    await browser.storage.sync.set({
      customProviders: customProviders.value
    });
  } catch (error) {
    console.error("保存自定义提供商失败:", error);
  }
};

// 完全重写的saveSettings函数，确保正确保存
const saveSettings = async () => {
  try {
    // 1. 首先获取当前的存储内容进行检查
    const currentData = await browser.storage.sync.get(null);
    console.log("保存前的数据:", currentData);

    // 2. 准备要保存的数据
    let apiKeysObj = {};
    
    // 如果已有密钥数据，复制一份避免引用问题
    if (currentData.providerApiKeys && typeof currentData.providerApiKeys === 'object') {
      apiKeysObj = JSON.parse(JSON.stringify(currentData.providerApiKeys));
    }
    
    // 3. 更新当前提供商的API密钥（加密后保存）
    if (selectedProvider.value) {
      const encryptedKey = await cryptoUtils.encryptApiKey(apiKey.value || "");
      apiKeysObj[selectedProvider.value] = encryptedKey;
      console.log(`已准备${selectedProvider.value}的加密API密钥`);
    }
    
    // 4. 准备自定义提供商数据
    let customProvidersData = [];
    if (customProviders.value.length > 0) {
      // 深拷贝自定义提供商数据
      customProvidersData = JSON.parse(JSON.stringify(customProviders.value));
      
      // 如果当前选中的是自定义提供商，确保更新它的URL和版本信息
      if (selectedProvider.value && isCustomProvider(selectedProvider.value)) {
        const index = customProvidersData.findIndex(p => p.id === selectedProvider.value);
        if (index !== -1) {
          customProvidersData[index].apiUrl = apiUrl.value || "";
          customProvidersData[index].apiVersion = apiVersion.value || "";
          console.log(`已更新自定义提供商 ${selectedProvider.value} 的API设置`);
        }
      }
    }
    
    // 5. 整合所有要保存的数据
    const dataToSave = {
      provider: selectedProvider.value,
      apiUrl: apiUrl.value,
      apiVersion: apiVersion.value,
      providerApiKeys: apiKeysObj,
      customProviders: customProvidersData,
    };
    
    // 打印即将保存的数据
    console.log("即将保存的完整数据 (API密钥已加密)");
    
    // 6. 清除现有数据再保存，避免合并问题
    await browser.storage.sync.clear();
    console.log("已清除现有存储数据");
    
    // 7. 保存新数据
    await browser.storage.sync.set(dataToSave);
    console.log("已保存新数据");
    
    // 8. 验证保存结果
    const savedData = await browser.storage.sync.get(null);
    console.log("保存后的数据:", savedData);
    
    // 9. 验证API密钥是否成功保存
    if (
      savedData.providerApiKeys && 
      selectedProvider.value &&
      typeof savedData.providerApiKeys[selectedProvider.value] !== 'undefined'
    ) {
      console.log("验证API密钥已加密保存");
    } else {
      console.warn("API密钥可能未正确保存");
    }
    
    // 10. 显示成功通知
    notification.value = {
      show: true,
      type: "success",
      message: "设置已保存！API密钥已加密存储",
    };
    
    setTimeout(() => {
      notification.value.show = false;
    }, 3000);
  } catch (error) {
    console.error("保存设置出错:", error);
    notification.value = {
      show: true,
      type: "error",
      message: `保存失败: ${error.message}`,
    };
  }
};

// 检查提供商是否为自定义的
const isCustomProvider = (providerId) => {
  return customProviders.value.some(p => p.id === providerId);
};
</script>

<template>
  <div class="options-container">
    <header class="options-header">
      <h1>AI问答助手设置</h1>
    </header>

    <main class="options-main">
      <div class="card">
        <div class="provider-section">
          <div class="provider-header">
            <label for="provider" class="section-title">选择AI服务提供商</label>
            <button 
              class="add-provider-btn" 
              @click="showAddProviderForm"
              title="添加自定义提供商"
            >
              <span>+</span>
            </button>
          </div>
          <select id="provider" v-model="selectedProvider" class="provider-select">
            <option value="" disabled>请选择服务提供商</option>
            <optgroup label="内置提供商">
              <option
                v-for="provider in builtInProviders"
                :key="provider.id"
                :value="provider.id"
              >
                {{ provider.name }}
              </option>
            </optgroup>
            <optgroup v-if="customProviders.length > 0" label="自定义提供商">
              <option
                v-for="provider in customProviders"
                :key="provider.id"
                :value="provider.id"
              >
                {{ provider.name }}
              </option>
            </optgroup>
          </select>
          
          <!-- 删除自定义提供商的按钮 -->
          <button 
            v-if="selectedProvider && isCustomProvider(selectedProvider)"
            class="delete-provider-btn"
            @click="deleteCustomProvider(selectedProvider)"
            title="删除此提供商"
          >
            <span class="delete-icon">🗑️</span> 删除此提供商
          </button>
        </div>
      </div>

      <!-- 添加自定义提供商表单 -->
      <div v-if="newProviderForm.show" class="card custom-provider-form">
        <div class="form-header">
          <h3>添加自定义提供商</h3>
          <button @click="closeAddProviderForm" class="back-btn" title="返回">
            <span>←</span> 返回
          </button>
        </div>
        
        <p class="form-description">
          添加您自己的API服务提供商。只需填写唯一标识符和显示名称，之后可以配置API地址和模型。
        </p>
        
        <div class="form-group">
          <label for="newProviderId">提供商标识符 (唯一):</label>
          <input 
            type="text" 
            id="newProviderId" 
            v-model="newProviderForm.id" 
            placeholder="例如: custom_api"
            class="form-input"
          />
          <small class="help-text">唯一标识符，不可与现有提供商重复</small>
        </div>
        <div class="form-group">
          <label for="newProviderName">提供商名称 (显示用):</label>
          <input 
            type="text" 
            id="newProviderName" 
            v-model="newProviderForm.name" 
            placeholder="例如: 我的自定义API"
            class="form-input"
          />
          <small class="help-text">在界面中显示的名称</small>
        </div>
        <div class="form-actions">
          <button @click="addCustomProvider" class="add-btn">
            <span class="add-icon">+</span> 添加提供商
          </button>
          <button @click="closeAddProviderForm" class="cancel-btn">取消</button>
        </div>
      </div>

      <div v-if="selectedProvider" class="card api-config">
        <h3 class="section-title">API配置</h3>
        <div class="form-group">
          <label for="apiKey">API密钥:</label>
          <div class="password-input-container">
            <input
              :type="showApiKey ? 'text' : 'password'"
              id="apiKey"
              v-model="apiKey"
              placeholder="输入您的API密钥"
              class="form-input"
            />
            <div
              class="password-toggle-icon"
              @click="toggleApiKeyVisibility"
              :title="showApiKey ? '隐藏密钥' : '显示密钥'"
            >
              <svg
                v-if="!showApiKey"
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon"
              >
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon"
              >
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
                <line x1="2" y1="2" x2="22" y2="22"></line>
              </svg>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="apiUrl">API地址:</label>
          <input
            type="text"
            id="apiUrl"
            v-model="apiUrl"
            placeholder="API服务地址"
            class="form-input"
          />
        </div>

        <div class="form-group">
          <label for="apiVersion">API版本/模型:</label>
          <input
            type="text"
            id="apiVersion"
            v-model="apiVersion"
            placeholder="API版本或模型名称"
            class="form-input"
          />
        </div>
      </div>

      <button
        @click="saveSettings"
        :disabled="!selectedProvider"
        class="save-btn"
      >
        <span class="save-icon">💾</span> 保存设置
      </button>

      <div v-if="notification.show" :class="['notification', notification.type]">
        <div class="notification-content">
          <span v-if="notification.type === 'success'" class="notification-icon">✅</span>
          <span v-else-if="notification.type === 'error'" class="notification-icon">❌</span>
          <span v-else class="notification-icon">ℹ️</span>
          {{ notification.message }}
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.options-container {
  width: 90%;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #333;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.options-header {
  margin-bottom: 30px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
}

h1 {
  font-size: 24px;
  font-weight: 600;
  color: #4f9bf8;
  margin: 0;
}

.options-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.provider-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.provider-select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  background-color: #f9f9fa;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.provider-select:focus {
  border-color: #4f9bf8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 155, 248, 0.2);
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #555;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  border-color: #4f9bf8;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 155, 248, 0.2);
}

.add-provider-btn {
  background-color: #4CAF50;
  color: white;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 20px;
  padding: 0;
  transition: background-color 0.2s, transform 0.1s;
}

.add-provider-btn:hover {
  background-color: #45a049;
}

.add-provider-btn:active {
  transform: scale(0.95);
}

.delete-provider-btn {
  padding: 8px 16px;
  background-color: #f5f5f5;
  color: #e53935;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  transition: background-color 0.2s, color 0.2s;
}

.delete-provider-btn:hover {
  background-color: #ffebee;
  border-color: #ffcdd2;
}

.delete-icon {
  font-size: 16px;
}

.custom-provider-form {
  border-left: 4px solid #4CAF50;
}

.custom-provider-form h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2e7d32;
  margin-top: 0;
  margin-bottom: 20px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.add-btn, .cancel-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.1s;
}

.add-btn {
  background-color: #4CAF50;
  color: white;
}

.add-btn:hover {
  background-color: #43a047;
}

.cancel-btn {
  background-color: #e0e0e0;
  color: #757575;
}

.cancel-btn:hover {
  background-color: #d5d5d5;
}

.add-btn:active, .cancel-btn:active {
  transform: scale(0.98);
}

.api-config {
  border-left: 4px solid #4f9bf8;
}

.api-config h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1565c0;
  margin-top: 0;
  margin-bottom: 20px;
}

.password-input-container {
  position: relative;
}

.password-input-container input {
  padding-right: 40px;
}

.password-toggle-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #757575;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle-icon:hover {
  color: #4f9bf8;
}

.icon {
  transition: transform 0.2s;
}

.password-toggle-icon:hover .icon {
  transform: scale(1.1);
}

.save-btn {
  width: 100%;
  max-width: 300px;
  margin: 10px auto 20px;
  padding: 14px 24px;
  background-color: #4f9bf8;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.save-btn:hover:not(:disabled) {
  background-color: #3a8be0;
}

.save-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.save-btn:disabled {
  background-color: #a0c4f1;
  cursor: not-allowed;
}

.save-icon {
  font-size: 18px;
}

.notification {
  margin: 10px auto;
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s, opacity 0.3s;
  animation: slide-in 0.3s ease;
}

.notification-content {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.notification-icon {
  font-size: 18px;
}

.success .notification-content {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #4caf50;
}

.error .notification-content {
  background-color: #ffebee;
  color: #c62828;
  border-left: 4px solid #f44336;
}

.info .notification-content {
  background-color: #e3f2fd;
  color: #0d47a1;
  border-left: 4px solid #2196f3;
}

@keyframes slide-in {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.back-btn {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #f5f5f5;
  color: #555;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.back-btn:hover {
  background-color: #e0e0e0;
}

.form-description {
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.help-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #757575;
}

.add-icon {
  font-size: 16px;
  margin-right: 4px;
}
</style>
